tldr: 與教學影片一同實作HTML與CSS的簡單網頁，並熟悉其用法
今天筆者想與各位做一點有趣的內容，相比於讀著那一堆語法與規定，不覺得實際去操作，並做出一個成果會更加的有趣且印象深刻嗎？因此本篇中我們將藉由影片教學與其提供的素材，來實際做出一個靜態網頁，並從過程中加深HTML與CSS的了解。這次也會帶到少部份JavaScript的內容，就當作是為之後要說的內容做一個開篇吧！
本篇參考YouTube頻道 JavaScript Mastery 的影片教學，推薦各位可以去瀏覽他們的內容，所有的教學皆是一行一行的帶著觀眾練習，充滿了適合新手的CrashCourse！
Project Github: https://github.com/adrianhajdin/project_html_css_website
安裝好Node.js後，我們應該就能使用npm來下載一些輔助使用的packages了，此時於終端機(terminal)中輸入
npm create vite@latest
便能夠開始我們的小安裝程式了！之後的設定如下：
結束後便能看到有個新建立的專案資料夾（之後將以sushi代稱），其架構如下：
sushi
├── index.html
├── package.json
├── public
│ └── vite.svg
└── src
├── counter.js
├── javascript.svg
├── main.js
└── style.css
其中vite.svg, src資料夾與其內部的檔案我們不會使用到，因此可以先刪除。接下來在sushi內建立兩個資料夾：js（放JavaScript檔案）, css（放CSS檔案），並分別於其中建立空白的檔案script.js和style.css。
除了這些網頁所需要的HTML, CSS以外，我們也將會需要圖片來讓頁面更加的活潑，在此我們可以前往影片下方所提供的輔助檔案.zip，並將它解壓縮後移到我們的sushi之中。如此一來所有的事前準備都弄好啦！現在的資料夾結構大致像這樣子。
sushi
├── assets
│ ├── about_bg1.png
│ ├── ... (在此省略）
│ └── user.png
├── css
│ └── style.css
├── js
│ └── script.js
├── index.html
├── package.json
└── public
影片中的作者也十分好心的提供了基本的style.css與script.js的程式碼，直接複製貼上就可以了，他們讓之後的網頁可以更順利的執行與運作。目前先加入這部份僅僅是為了讓之後的製作過程更加流暢，用途則將會於之後正式用到時再做說明。
有一點要注意的是，我們需要將style.css的5-11行先註解掉，否則會使網頁報錯（因為程式嘗試尋找暫時還不存在的檔案）
再接下來我們將index.html檔案做些微的變動，下方為此時的檔案與其說明：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml+png" href="/assets/sushi-9.png" />
<link rel="stylesheet" href="css/style.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Sushi</title>
</head>
<body>
<script type="module" src="/js/script.js"></script>
</body>
</html>
| 標籤 | 說明 |
|---|---|
<html lang="en"> |
表示網頁將會使用英文表示，此為瀏覽器所讀的內容 |
<meta charset="UTF-8" /> |
要求瀏覽器以UTF-8的編碼去解讀內容 |
<link rel="icon" ... /> |
用於指定網頁於分頁一覽的圖示，type表示圖檔格式，href用於指定圖片位置 |
<link rel="stylesheet" ... /> |
用於指定此網頁所會用到的css檔案，href表示檔案位置 |
<meta name="viewport" ... /> |
告知瀏覽器該如何顯示畫面與大小比例 |
<title> |
網頁於分頁一欄中所顯示的名稱 |
<script type="module" ... > |
標示javascript程式碼的檔案位置 |
現在於terminal中輸入npm install，等下載完成後輸入npm run dev，這時會給出一個網址，點擊或複製網址後並開啟頁面，便可以看到網頁目前的樣子啦！
因為目前的<body>之中還未加入任何元素，因此我們所看到的畫面此時是空白的。讀者們可以在<script>上方隨意加一些內容，如<p>, <h1> 等等，並觀察看看網頁的變化吧！
*注意：如果出現紅字顯示 import AOS from "aos" 相關字樣，可先按下 [q-Enter] 的按鍵組合以中斷網頁顯示，接著輸入npm install aos，之後再次輸入npm run dev便能夠解決問題了。
因為時間有限，筆者實在無法在今日內完成本篇文章，因此之後將每日慢慢的把後面的內容補完，還請多多見諒。
最後，想謝謝讀到這裡的你，若有任何想法或建議都歡迎留言！明天會再繼續努力更新的！
iThome鐵人賽
看影片追技術